<template>
  <div>
    <template v-for="item in navButtonItem">
      <el-button
        :disabled="disabled.get(item.mdlCode)"
        :key="item.id"
        @click="addNew(item)"
        plain
        size="mini"
        type="primary"
        v-if="isAuth(item.mdlCode) && vif.get(item.mdlCode)"
        >{{ dynamicBtnNames.get(item.mdlCode) || item.mdlName }}
      </el-button>
    </template>
  </div>
</template>

<script>
import isAuth from '@/mixins/buttonAuth'

export default {
  mixins: [isAuth],
  name: 'button-name',
  props: {
    mapInfo: {
      type: Object
    },
    // 控制按钮是否显示，需要传递一个map，key为按钮的code，值为 true 或者 false，需要传递所有按钮的值
    vif: {
      type: Object,
      default: function() {
        const map = new Map()
        if (this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand != null) {
          this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand.forEach(m => {
            map.set(m.mdlCode, true)
          })
        }
        return map
      }
    },
    // 控制按钮是否禁用，需要传递一个map，key为按钮的code，值为 true 或者 false，需要传递所有按钮的值
    disabled: {
      type: Object,
      default: function() {
        const map = new Map()
        if (this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand != null) {
          this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand.forEach(m => {
            map.set(m.mdlCode, false)
          })
        }
        return map
      }
    },
    // 动态控制按钮的名字，只是临时改变
    dynamicBtnNames: {
      type: Object,
      default: function() {
        const map = new Map()
        if (this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand != null) {
          this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand.forEach(m => {
            map.set(m.mdlCode, m.mdlName)
          })
        }
        return map
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    // navButtonItem: function() {
    //   return this.$store.getters['user/GET_NAV_BUTTON'] ;
    // },
    navButtonItem: function() {
      let students = this.$store.getters['user/GET_NAV_BUTTON'].moduleChildrenGrand
      return this.sortByKey(students, 'mdlSeq')
    }
  },
  methods: {
    //跟据mdlSeq字段排序
    sortByKey(array, key) {
      return array.sort(function(a, b) {
        var x = a[key]
        var y = b[key]
        return x < y ? -1 : x < y ? 1 : 0
      })
    },
    addNew(item) {
      this.$emit('clickEvent', item)
    }
  },
  created() {}
}
</script>
